<template>
	<view class="container">
		<m-header class="top"></m-header>
		<view class="shuzi u-m-t-20">
			<view class="count u-p-t-36 u-p-b-10 u-flex u-row-center">
				<u-count-to class="count-to" ref="uCountTo" :autoplay="autoplay" :startVal="startVal" :endVal="endVal" :duration="duration"
				 :decimals="decimals" :bold="bold" :fontSize="fontSize" :color="color"></u-count-to>
				<text class="u-m-l-10">名优秀伙伴为您服务</text>
			</view>

			<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
				<u-form-item class="group" :required="required" :label-width="200" :border-bottom="false" :label-position="labelPosition"
				 label="我是" prop="ws">
					<u-input :border="border" type="select" :select-open="selectShowWs" v-model="model.ws" placeholder="请选择"
					 placeholderStyle="color: #4B9CFF;" input-align="right" @click="selectShowWs = true"></u-input>
				</u-form-item>
				<u-form-item class="group" :required="required" :label-width="200" :border-bottom="false" :label-position="labelPosition"
				 label="我需要" prop="wxy">
					<u-input :border="border" type="select" :select-open="selectShowWxy" v-model="model.wxy" placeholder="请选择"
					 placeholderStyle="color: #4B9CFF;" input-align="right" @click="selectShowWxy = true"></u-input>
				</u-form-item>
				<u-form-item class="group" :required="required" :label-width="200" :border-bottom="false" :label-position="labelPosition"
				 label="我意向" prop="wyx">
					<view style="flex: 1;text-align: right;" @click="handleWyx()">
						<u-icon name="arrow-right" style="color:#9DA2B0;font-size: 32upx;"></u-icon>
					</view>
					<!-- <u-input :border="border" type="select" :select-open="selectShowWyx" v-model="model.wyx" placeholder="请选择"
					 placeholderStyle="color: #4B9CFF;" input-align="right" @click="selectShowWyx = true"></u-input> -->
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30" :label-position="labelPosition" label="公社情况" label-width="400" prop="status">
					<u-radio-group v-model="model.status" @change="checkboxGroupChange1" :width="radioCheckWidth" :wrap="radioCheckWrap">
						<u-radio shape="square" v-for="(item, index) in checkboxListThree" :key="index" :name="item.name">{{ item.name }}</u-radio>
					</u-radio-group>
				</u-form-item>

				<u-form-item class="u-m-l-30 u-m-r-30" :label-position="labelPosition" label="诚信保证金" label-width="400" prop="xhm">
					<u-radio-group v-model="model.xhm" @change="checkboxGroupChange" :width="radioCheckWidth" :wrap="radioCheckWrap">
						<u-radio shape="square"  v-model="item.checked" v-for="(item, index) in checkboxListTwo" :key="index" :name="item.name">{{ item.name }}</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item v-if="zsbzj" class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" label="" prop="cxbzj">
					<u-input :border="border" placeholder="请输入保证金金额  元" v-model="model.cxbzj" type="text" input-align="right"></u-input>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" label="N+1团队名" prop="njytdm">
					<u-input :border="border" placeholder="请输入" v-model="model.njytdm" type="text" input-align="right"></u-input>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30" :label-width="200" :label-position="labelPosition" label="企业性质" prop="qyxz">
					<u-input type="select" :select-open="selectShowQyxz" v-model="model.qyxz" placeholder="请选择" placeholderStyle="color: #0D1D36;"
					 input-align="right" @click="selectShowQyxz = true"></u-input>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" label="企业资质" prop="qyzz">
					<u-input type="select" :select-open="selectShowQyzz" v-model="model.qyzz" placeholder="请选择" placeholderStyle="color: #0D1D36;"
					 input-align="right" @click="selectShowQyzz = true"></u-input>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30" :label-width="200" :label-position="labelPosition" label="服务类型" prop="fwlx">
					<u-input type="select" :select-open="selectShowFwlx" v-model="model.fwlx" placeholder="请选择" placeholderStyle="color: #0D1D36;"
					 input-align="right" @click="selectShowFwlx = true"></u-input>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30" :label-width="200" :label-position="labelPosition" label="企业地址" prop="qydz">
					<u-input type="select" :select-open="selectShowQydz" v-model="model.qydz" placeholder="请选择" placeholderStyle="color: #0D1D36;"
					 input-align="right" @click="selectShowQydz = true"></u-input>
				</u-form-item>
				
				<u-form-item class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" :border-bottom="false" label="人员规模" prop="rygm">
					<u-input type="select" :select-open="selectShowRygm" v-model="model.rygm" placeholder="请选择" placeholderStyle="color: #0D1D36;"
					 input-align="right" @click="selectShowRygm = true"></u-input>
				</u-form-item>
				<view class="fgx1">
				</view>
				<u-form-item class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" label="关键字" prop="gjz">
					<u-input :border="border" placeholder="请输入" v-model="model.gjz" type="text" input-align="right"></u-input>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" label="屏蔽关键字" prop="pbgjz">
					<u-input :border="border" placeholder="请输入" v-model="model.pbgjz" type="text" input-align="right"></u-input>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-40" :label-width="200" :label-position="labelPosition" :border-bottom="false" label="匹配时效" prop="ppsx">
					<u-input :border="border" @click="showDate = true" placeholder="请选择" v-model="model.ppsx" type="text" input-align="right"></u-input>
					<u-calendar v-model="showDate" ref="calendar" @change="changeDate" mode="date"
						:start-text="startText" :end-text="endText" :range-color="rangeColor" max-date="2022-10-01"
						:range-bg-color="rangeBgColor" :active-bg-color="activeBgColor"
					>
					</u-calendar>
				</u-form-item>
				<view class="fgx1">
				</view>
				<view class="u-flex u-row-start qita u-p-30">
					<image src="../../static/img/shuoming.png"></image>
					<view class="u-m-l-20">其他说明</view>
				
				</view>
				<u-form-item class="zwpj u-m-l-30 u-m-r-30 " :label-position="labelPosition"  prop="qtsm">
					<u-input  type="textarea" :border="border" placeholder="请输入其他说明" v-model="model.qtsm" />
				</u-form-item>
			</u-form>
			
		</view>
	
		<view v-if="zhanshi" class="list u-m-t-50">
			<view class="u-flex u-row-between u-p-20">
				<view>
					<image src="../../static/img/tuandui.png"></image>
					<text class="title u-m-l-30 ">团队信息</text>
				</view>
			</view>
			<view  class="u-m-t-20" @click="toChuanId(item.id)" v-for="(item,index) in teamList" :key="index">
				<view class=" u-flex u-row-start">
					<view class="card u-m-l-30" :style="{ backgroundImage: 'url(' + yebg + ')' }">
						<view class="btn">
							所在城市
						</view>
						<view class="titletwo u-m-t-20 u-m-l-10">
							{{item.area}}
						</view>
					</view>
					<view class="card u-m-l-30" :style="{ backgroundImage: 'url(' + dyrs + ')' }">
						<view class="btn btntwo">
							队员人数
						</view>
						<view class="titletwo u-m-t-20 u-m-l-10 titlethree">
							{{item.num}}
						</view>
					</view>
				</view>
				<view class=" u-flex u-row-start u-m-t-30">
					<view class="card u-m-l-30" :style="{ backgroundImage: 'url(' + dzzy + ')' }">
						<view class="btn btnthree">
							队长专业
						</view>
						<view class="titletwo u-m-t-20 u-m-l-10 titlefour">
							{{item.specialty}}
						</view>
					</view>
					<view class="card u-m-l-30" :style="{ backgroundImage: 'url(' + dzzc + ')' }">
						<view class="btn btnfour">
							队长职称
						</view>
						<view class="titletwo u-m-t-20 u-m-l-10 titlefive">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
			
		</view>
		<view class="u-flex u-row-center u-m-t-50">
			<view class="dianone"></view>
			<view class="diantwo"></view>
			<text class="hrxz u-m-l-20 u-m-r-20">互认须知</text>
			<view class="diantwo"></view>
			<view class="dianone"></view>
		</view>
		<view class="u-m-t-30 xuhi">
			<view class="u-m-l-30 u-m-b-20"> 1.互认机制为高级会员专享服务;</view>
			<view class="u-m-l-30 u-m-b-20">2.互认机制为供需双方提供更广阔合作平台，请自觉遵守相关法律及行业规范;</view>
			<view class="u-m-l-30 u-m-b-20">3.为减少垃圾信息，日均邀请上限3次，每次可加多个对象;</view>
			<view class="u-m-l-30 u-m-b-20">4.互认机制说明（仅对会员开放）;</view>
		</view>

		<view class="warp u-m-t-20 u-p-30">
			<u-button class="button" @click="submit">马上为我匹配</u-button>
			<!--弹出框-->
			<u-select mode="single-column" :list="wsList" v-model="selectShowWs" @confirm="selectConfirmWs"></u-select>
			<u-select mode="single-column" :list="wxyList" v-model="selectShowWxy" @confirm="selectConfirmWxy"></u-select>
			<u-select mode="single-column" :list="wyxList" v-model="selectShowWyx" @confirm="selectConfirmWyx"></u-select>			
			<u-select mode="single-column" :list="fetchDict.enterprise_nature" value-name="id" label-name="name" v-model="selectShowQyxz" @confirm="selectConfirmQyxz"></u-select>
			<u-select mode="single-column" :list="fetchDict.qualification" value-name="id" label-name="name" v-model="selectShowQyzz" @confirm="selectConfirmQyzz"></u-select>
			<u-select mode="single-column" :list="fetchDict.service_type"  value-name="id" label-name="name" v-model="selectShowFwlx" @confirm="selectConfirmFwlx"></u-select>
			<u-select :default-value="defaultValue" v-model="selectShowQydz" mode="mutil-column-auto" value-name="value" label-name="name" child-name="submenu" :list="listCitys" @confirm="confirmCity"></u-select>	
			<u-select mode="single-column" :list="fetchDict.staff_size" value-name="id" label-name="name" v-model="selectShowRygm" @confirm="selectConfirmRygm"></u-select>
			<u-picker mode="region" v-model="pickerShow" @confirm="regionConfirm"></u-picker>
			<!--弹出框-->
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			let that = this;
			return {
				fetchDict:[],
				showDate:false,
				qyxzList:[],
				qyzzList:[],
				fwlxList:[],
				rygmList:[],
				yebg: '../../static/img/szcs.png',
				dyrs: '../../static/img/dyrs.png',
				dzzy: '../../static/img/dzzy.png',
				dzzc: '../../static/img/dzzc.png',
				show: false,
				mode: 'range',
				result: "请选择日期",
				startText: '开始',
				endText: '结束',
				rangeColor: '#2979ff',
				rangeBgColor: 'rgba(41,121,255,0.13)',
				activeBgColor: '#2979ff',
				btnType: 'primary',
				zsbzj: false,
				radio:'',
				radio1: '',
				radioCheckWidth: 'auto',
				radioCheckWrap: false,
				type: '',
				/**
				 * form验证
				 * */
				model: {
					ws: '',
					wxy: '',
					wyx: '',
					cxbzj: '',
					fbsx: '',
					gjz: '',
					pbgjz: '',
					ppsx: '',
					qyxz: '',
					qyzz: '',
					fwlx: '',
					qydz: '',
					rygm: '',
					njytdm: '',
					qtsm: '',
					status: '公开',
					xhm:'需要'
				},
				teamId: 0,				
				wsList:[
					// {
					// 	value: '个人',
					// 	label: '个人'
					// },
					{
						value: '团队',
						label: '团队'
					}
				],
				wxyList:[
					{
						value: 'n+1',
						label: 'n+1'
					}
				],
				wyxList:[],
				teamList:[],
				checkboxListTwo: [

					{
						name: '需要',
						checked: false,
						disabled: false
					},
					{
						name: '不需要',
						checked: false,
						disabled: false
					},
				],
				checkboxListThree: [

					{
						name: '公开',
						checked: false,
						disabled: false
					},
					{
						name: '隐藏',
						checked: false,
						disabled: false
					},
				],					
				//选择城市
				showCity: false,
				defaultValue: [3],
				listCitys:[],
				rules: {
					zyp: [{
						required: false,
						message: '请选择招/应聘',
						trigger: 'change'
					}],
					// region: [
					// 	{
					// 		required: false,
					// 		message: '请选择地区',
					// 		trigger: 'change',
					// 	}
					// ],
					ws: [{
						required: false,
						message: '请选择我是',
						trigger: 'change'
					}],
					wxy: [{
						required: false,
						message: '请选择我需要',
						trigger: 'change'
					}],
					wyx: [{
						required: false,
						message: '请选择我意向',
						trigger: 'change'
					}]
				},
				zhanshi: false,
				required: false,
				border: false,
				check: false,
				region: '',
				selectShowQyxz: false,
				selectShowQyzz: false,
				selectShowFwlx: false,
				selectShowQydz: false,
				selectShowRygm: false,
				selectStatus: 'close',
				selectShowZyp: false,
				selectShowWs: false,
				selectShowWxy: false,
				selectShowWyx: false,
				selectShowPpsx: false,
				selectShowQydy: false,
				selectShowLyxy: false,
				pickerShow: false,
				labelPosition: 'left',
				codeTips: '',
				errorType: ['toast'],
				/**/

				/**
				 * 数字统计
				 * */
				startVal: 500,
				endVal: 500,
				separator: ',',
				decimals: 0,
				duration: 2000,
				autoplay: true,
				useEasing: true,
				current: 3,
				isStop: false,
				bold: false,
				fontSize: 24,
				color: '#fff',
				/**/
				keyIndex: 0,
				keywords: [{
					name: '企业',
					selected: true
				}, {
					name: '设计师',
					selected: false
				}, {
					name: '监理',
					selected: false
				}, {
					name: '大型企业',
					selected: false
				}, {
					name: '采购',
					selected: false
				}, {
					name: '监理',
					selected: false
				}]
			};
		},
		mounted() {
			let identity = this.$store.state.userInfo.identityType
			if(identity == 0){
				let wsValue = {};
				wsValue['value'] = "个人";
				wsValue['label'] = "个人";
				this.wsList.push(wsValue);
			}else if(identity == 1){
				let wsValue = {};
				wsValue['value'] = "企业";
				wsValue['label'] = "企业";
				this.wsList.push(wsValue);
			}
		},
		onLoad(options){
			if(options.pattern){
				this.model.ws = '企业'
				this.model.wxy = 'n+1'
				this.type = options.pattern
			}
			if(options.ws){
				this.model.ws = options.ws
				this.model.wxy = 'n+1'
			}
			//获取省市区
			if(options.row){
				this.model = JSON.parse(decodeURIComponent(options.row));
			}
		},
		onShow(){
			// this.wxyDictionary();
			// this.wyxDictionary();
			this.dictionaryFetchDict('enterprise_nature');
			this.dictionaryFetchDict('qualification');
			this.dictionaryFetchDict('service_type');
			this.dictionaryFetchDict('staff_size');
			//获取省市区
			this.cityList();
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {	
			handleWyx(){
				if(this.ws == '企业'){
					if(this.model.wxy){
						if(this.type == '个人'){
							uni.navigateTo({
								url:"/pages/wisdomcommune/njySelect/personalWyxContent"
							})
						}else if(this.type == '团队'){
							uni.navigateTo({
								url:"/pages/wisdomcommune/njySelect/teamWyxContent"
							})
						}else{
							uni.navigateTo({
								url:"/pages/wisdomcommune/njySelect/wyxContent"
							})
						}
						
					}else{
						uni.showToast({
							title: '请先选择我需要',
							icon: 'none'
						});
					}
				}else{
					if(this.model.wxy){
						uni.navigateTo({
							url:"/pages/wisdomcommune/njySelect/wyxContent?row="+this.model
						})
					}else{
						uni.showToast({
							title: '请先选择我需要',
							icon: 'none'
						});
					}
				}
			},
			confirmCity(e) {
				this.model.qydz = '';
				e.map((val, index) => {
					this.model.qydz += this.model.qydz == '' ? val.label : '-' + val.label;
				})
			},
			changeDate(e) {
				this.model.ppsx = e.result;				
			},
			async cityList(){
				let result = await this.$apis.fetchArea({level:2});	
				this.listCitys = result.data;
			},
			async dictionaryFetchDict(keyWords){
				let result = await this.$apis.fetchDict({keyWords:keyWords});
				this.fetchDict[keyWords] = result.data;		
			},
			// checkbox选择发生变化
			checkboxGroupChange(e) {
				this.model.xhm = e;					
			},
			// checkbox选择发生变化
			checkboxGroupChange1(e) {
				this.model.status = e;				
			},
			toChuanId(id){
				debugger;
				this.teamId = id;
			},
			async initPage(){
				let result = await this.$apis.selectAllTeam();
				this.teamList = result.data;
			},
			// 创建智汇N+1
			async submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
						this.matching();
						// this.saveNjy();
					} else {
						console.log('验证失败');
					}
				});
				
			},
			async saveNjy(){
				let reqBody = {};				
				reqBody['status'] = this.model.status == "公开"?1:0;		
				reqBody['xhm'] = this.model.xhm == "需要"?1:0;
				reqBody['status'] = this.gsqk;
				reqBody['bond'] = parseInt(this.model.cxbzj);
				reqBody['teamId'] = this.teamId;
				let result = await this.$apis.saveNjy(reqBody);
				if(result.code==200){
					uni.showToast({
						title:"成功"
					})
					setTimeout(() => {
						this.$mRouter.switchTab({
							route:this.$mRoutesConfig.message
						});
					},1000)
				}
			},
			//查询匹配 我是  字典数据
			// async wsDictionary(){
			// 	let reqBody = {};
			// 	reqBody['primary'] = "招投标";
			// 	reqBody['secondary'] = "我是";
			// 	let result = await this.$apis.findMatchingDictionary(reqBody);
			// 	let list = result.data;
			// 	for (let i = 0; i < list.length; i++) {
			// 		let wsValue = {};
			// 		wsValue['value'] = list[i].name;
			// 		wsValue['label'] = list[i].name;
			// 		this.wsList.push(wsValue)
			// 	}
			// },
			//服务匹配并新增
			async matching(){
				try {
				let reqBody = {};
				reqBody['isVisible'] = this.gsqk;
				reqBody['name'] = this.model.njytdm;
				reqBody['bond'] = parseInt(this.model.cxbzj);
				reqBody['bestKey'] = this.model.gjz;
				reqBody['blackKey'] = this.model.pbgjz;
				reqBody['remarks'] = this.model.qtsm;
				reqBody['expiryTime'] = this.model.ppsx;
				reqBody['iam'] = this.model.ws;
				reqBody['imean'] = this.model.wyx;
				reqBody['ineed'] = this.model.wxy;
				reqBody['xingzhi'] = this.model.qyxz;
				reqBody['zizhi'] = this.model.qyzz;
				reqBody['leixing'] = this.model.fwlx;
				reqBody['dizhi'] = this.model.qydz;
				reqBody['total'] = this.model.rygm;
				reqBody['teamId'] = this.teamId;
				let data = await this.$apis.njyMatching(reqBody);
				if(data.code == 200){
					uni.showToast({
							title: "服务匹配成功",
							icon: 'none'
					});
					setTimeout(() => {
						this.$mRouter.switchTab({
							route:this.$mRoutesConfig.message
						});
					},2000)
					
				}else{
					uni.showToast({
						title: result.msg,
						icon: 'none'
					});
					return;
				}
				} catch (e) {
					console.log(e);
					this.submitBtnDis = false;
				}
			},
			//查询匹配 我需要  字典数据
			async wxyDictionary(){
				let reqBody = {};
				reqBody['primary'] = "招投标";
				reqBody['secondary'] = "我需要";
				let result = await this.$apis.findMatchingDictionary(reqBody);
				let list = result.data;
				for (let i = 0; i < list.length; i++) {
					let wxyValue = {};
					wxyValue['value'] = list[i].name;
					wxyValue['label'] = list[i].name;
					this.wxyList.push(wxyValue)
				}
			},
			//查询匹配 我意向  字典数据
			async wyxDictionary(){
				let reqBody = {};
				reqBody['primary'] = "招投标";
				reqBody['secondary'] = "我意向";
				let result = await this.$apis.findMatchingDictionary(reqBody);
				let list = result.data;
				for (let i = 0; i < list.length; i++) {
					let wyxValue = {};
					wyxValue['value'] = list[i].name;
					wyxValue['label'] = list[i].name;
					this.wyxList.push(wyxValue)
				}
			},
			selectKey(e) {
				this.keywords[e].selected = !this.keywords[e].selected;
			},
			// 选择地区回调
			regionConfirm(e) {
				this.model.region = e.province.label + '-' + e.city.label + '-' + e.area.label;
			},
			// 选择
			selectConfirmWs(e) {
				if(e[0].value == "团队"){
					this.zhanshi = true;
					this.initPage();
				}
				this.model.ws = '';
				e.map((val, index) => {
					this.model.ws += this.model.ws == '' ? val.label : '-' + val.label;
				});
			},
			selectConfirmWxy(e) {
				let identity = this.$store.state.userInfo.identityType
				let ws = this.model.ws
				if(ws){
					if(identity == 1){
						if(ws == '企业'){
							uni.navigateTo({
								url:"/pages/wisdomcommune/njySelect/matchObject"
							})
						}else {
							uni.navigateTo({
								url:"/pages/wisdomcommune/njySelect/wxyContent?ws="+ws
							})
						}
						
					}else{
						uni.navigateTo({
							url:"/pages/wisdomcommune/njySelect/wxyContent?ws="+ws
						})
					}
				}else{
					uni.showToast({
						title: '请先选择我是',
						icon: 'none'
					});
				}
				
				this.model.wxy = '';
				e.map((val, index) => {
					this.model.wxy += this.model.wxy == '' ? val.label : '-' + val.label;
				});
			},
			selectConfirmWyx(e) {
				this.model.wyx = '';
				e.map((val, index) => {
					this.model.wyx += this.model.wyx == '' ? val.label : '-' + val.label;
				});
			},
			selectConfirmFbsx(e) {
				this.model.fbsx = '';
				e.map((val, index) => {
					this.model.fbsx += this.model.fbsx == '' ? val.label : '-' + val.label;
				});
			},
			change(e) {
				if (this.mode == 'range') {
					this.result = e.startDate + " - " + e.endDate;
				} else {
					this.result = e.result;
				}
			},
			dianji() {
				this.show = true;
			},
			selectConfirmQydy(e) {
				this.model.qydy = '';
				e.map((val, index) => {
					this.model.qydy += this.model.qydy == '' ? val.label : '-' + val.label;
				});
			},
			selectConfirmQyxz(e) {
				this.model.qyxz = '';
				e.map((val, index) => {
					this.model.qyxz += this.model.qyxz == '' ? val.label : '-' + val.label;
				});
			},
			selectConfirmQyzz(e) {
				this.model.qyzz = '';
				e.map((val, index) => {
					this.model.qyzz += this.model.qyzz == '' ? val.label : '-' + val.label;
				});
			},
			selectConfirmFwlx(e) {
				this.model.fwlx = '';
				e.map((val, index) => {
					this.model.fwlx += this.model.fwlx == '' ? val.label : '-' + val.label;
				});
			},
			selectConfirmQydz(e) {
				this.model.qydz = '';
				e.map((val, index) => {
					this.model.qydz += this.model.qydz == '' ? val.label : '-' + val.label;
				});
			},
			selectConfirmRygm(e) {
				this.model.rygm = '';
				e.map((val, index) => {
					this.model.rygm += this.model.rygm == '' ? val.label : '-' + val.label;
				});
			},
			selectConfirmPpsx(e) {
				this.model.ppsx = '';
				e.map((val, index) => {
					this.model.ppsx += this.model.ppsx == '' ? val.label : '-' + val.label;
				});
			}
		}
	};
</script>
<style scoped lang="scss">
	page {
		background: #ffffff;
	}

	.top {
		width: 100%;
		height: 260rpx;
		background: $uni-bg-color-ad;

		.above {
			display: flex;
			justify-content: center;
			margin-left: -46rpx;

			.picture {
				width: 117.8rpx;
				height: 137.4rpx;
				margin-left: 46rpx;
				margin-top: 20rpx;
			}
		}

		.below {
			display: flex;
			justify-content: center;
			margin-left: -46rpx;

			.picture {
				width: 117.8rpx;
				height: 137.4rpx;
				margin-left: 46rpx;
				margin-top: 1rpx;
			}
		}
	}

	.count {
		margin-top: -50rpx;
		width: 100%;
		height: 100rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;

		.count-to {
			font-size: 24rpx;
		}

		text {
			padding: 2rpx 12rpx;
			background: #ff9e21;
			color: #ffffff;
			font-size: 24rpx;
		}
	}

	.fgx {
		width: 100%;
		height: 20rpx;
		background-color: #F5F5F9;
		margin-top: 40rpx;
	}

	.fgx1 {
		width: 100%;
		height: 20rpx;
		background-color: #F5F5F9;
	}

	.group {
		padding: 6rpx 21rpx;
		background: #f1f7ff;
		border-radius: 6rpx;
		margin: 30rpx 30rpx 0 30rpx;
	}

	.button {
		width: 662rpx;
		margin: 130rpx auto 90rpx auto;
		background: #ab61ff;
		border-radius: 40rpx;
		border: 0;
		color: #fff;

		&.u-hairline-border:after {
			border: 0;
		}
	}

	.word {
		font-size: 36rpx;
		color: #0d1d36;
		font-weight: bold;
	}

	.list {
		width: 690rpx;
		// height: 428rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 17rpx 4rpx rgba(149, 146, 155, 0.17);
		border-radius: 20px;
		margin: 0 auto;


		.title {
			font-size: 34rpx;
			color: #0E1E36;
			font-weight: bold;
		}


		image {
			width: 36rpx;
			height: 32rpx;
		}

		.card {
			width: 312rpx;
			height: 139rpx;
			background-size: auto 100%;
			border: 1px dashed;
			padding: 20rpx;
			// padding: 100upx 75upx;

			.btn {
				width: 122rpx;
				height: 37rpx;
				background: #BABAF6;
				border-radius: 4rpx;
				color: #FFFFFF;
				font-size: 24rpx;
			}

			.btntwo {
				background: #F2C276;
			}

			.btnthree {
				background: #90d9c1;
			}

			.btnfour {

				background: #F0A4A3;
			}

			.titletwo {
				font-size: 36rpx;
				color: #8484CC;
			}

			.titlethree {
				color: #CB8438;
			}

			.titlefour {
				color: #90d9c1;
			}

			.titlefive {
				color: #CE7D7C;
			}
		}



	}

	.hrxz {
		font-size: 30rpx;
		font-weight: bold;
		color: #0D1D36;
	}

	.dianone {
		width: 14rpx;
		height: 14rpx;
		background: #AB61FF;
		opacity: 0.6;
		border-radius: 50%;

	}

	.diantwo {
		width: 14rpx;
		height: 14rpx;
		background: #AB61FF;
		border-radius: 50%;

	}

	.xuhi {

		font-size: 28rpx;
		color: #9DA2B0;
	}
	.qita{
		
		image{
			width: 29rpx;
			height: 29rpx;;
		}
	}
	.zwpj{
			width: 690rpx;
			height: 260rpx;
			background-color: #F5F5F9;
			font-size: 30rpx;
			color: #F5F5F9;
			border-radius: 10rpx;
			line-height: 44rpx;
		}
</style>
